{% load staticfiles %}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>登录</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.28/vue.js"></script>
  <script src="{% static 'js\reqwest.js' %}"></script>
  <link rel="stylesheet" href="{% static 'css\semantic.css' %}" media="screen" title="no title" charset="utf-8">
  <link rel="stylesheet" href="{% static 'css\login.css' %}" media="screen" title="no title" charset="utf-8">
  <link rel="shortcut icon" type="" href="{% static 'images/python_512px_1118083_easyicon.net.png' %}">
</head>

<body id="app">
  <div class="bg">
    <div class="ui image logo">
      <img src="{% static 'images/bg-logo.png' %}" alt="" />
    </div>
    <div class="ui  two item text  menu">
      <a class="item" href="{% url 'register' %}">
        <span><p class="outset" style="border-bottom:2px solid rgb(247, 250, 252);">注册</p>
</span>
      </a>
      <a class="active item" href="#list/editors">
        <span><p class="outset" style="border-bottom:2px solid #2185D0;">登录</p>
</span>
      </a>
    </div>
    <form method="POST" action="{% url 'Login'%}">
      {% if form.errors %}
      <div class="ui vertical menu">
        <div class="item">
          <div class="ui transparent input">
            <input v-model="username" name="email" type="email" placeholder="邮箱" value="">
          </div>
        </div>
        <div class="item">
          <div class="ui transparent input">
            <input v-model="password" name="password" type="password" placeholder="密码（不少于6位）" value="">
          </div>
        </div>
      </div>
      {% csrf_token %}
      <button v-on:click="getToken" class="ui blue button" type="submit">登录</button>
      <div class="ui negative message">
        <i class="close icon"></i>
        <div class="header">{{ form.errors }}</div>
      </div>
      {% elif error %}
      <div class="ui vertical menu">
        <div class="item">
          <div class="ui transparent input">
            <input v-model="username" name="email" type="email" placeholder="邮箱" value="">
          </div>
        </div>
        <div class="item">
          <div class="ui transparent input">
            <input v-model="password" name="password" type="password" placeholder="密码（不少于6位）" value="">
          </div>
        </div>
      </div>
      <button v-on:click="getToken" class="ui blue button" type="submit">登录</button>
      <div class="ui negative message">
        <i class="close icon"></i>
        <div class="header">{{ error }}</div>
      </div>
      {% else %}
      <div class="ui vertical menu">
        <div class="item">
          <div class="ui transparent input">
            <input v-model="username" name="email" type="email" placeholder="邮箱" value="">
          </div>
        </div>
        <div class="item">
          <div class="ui transparent input">
            <input v-model="password" name="password" type="password" placeholder="密码（不少于6位）" value="">
          </div>
        </div>
      </div>
      <button class="ui blue button" type="submit" v-on:click="getToken">登录</button> {% csrf_token %} {% endif %}
    </form>
    <div class="ui text menu">
      <div class="meun">
        <div class="ui checkbox">
          <input type="checkbox" checked>
          <label>记住我</label>
        </div>
      </div>
      <div class="right menu">
        忘记密码？
      </div>
    </div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
          el: "#app",
          data: {
          },
          methods: {
            getToken: function () {
              var self = this;
              reqwest({
                url: '/api/token-auths',
                type: 'json',
                method: 'post',
                data: {
                    username: self.username,
                    password: self.password,
                },
                success: function (resp) {
                  console.log(resp);
                  Cookies.set("token",resp.token)
                }
              })
            },
          },
    })

  </script>
</body>

</html>